<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>智能混合视频播放器</title>

    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://vjs.zencdn.net/8.10.0/video-js.min.css"
      rel="stylesheet"
    />

    <style>
      :root {
        --primary-glow: rgba(59, 130, 246, 0.5);
        --success-glow: rgba(34, 197, 94, 0.6);
        --danger-glow: rgba(239, 68, 68, 0.6);
        --info-glow: rgba(56, 189, 248, 0.6);

        --primary-color: #3b82f6;
        --success-color: #22c55e;
        --danger-color: #ef4444;
        --info-color: #38bdf8;

        --bg-start: #111827;
        --bg-end: #1f2937;

        --card-bg: rgba(31, 41, 55, 0.85);
        --card-border: rgba(255, 255, 255, 0.1);
        --card-shadow: rgba(0, 0, 0, 0.25);

        --text-primary: #f9fafb;
        --text-secondary: #9ca3af;
        --text-tertiary: #6b7280;

        --border-radius: 1rem;
        --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      }

      * {
        box-sizing: border-box;
      }

      /* --- 关键修改 1: 规范化大屏（默认）布局 --- */
      html {
        height: 100vh; /* 使用 vh 确保高度占满视口 */
        overflow: hidden; /* 在大屏上禁止滚动 */
        background: linear-gradient(
          135deg,
          var(--bg-start) 0%,
          var(--bg-end) 100%
        );
        font-family: "Inter", "Segoe UI", "PingFang SC", "Microsoft YaHei",
          sans-serif;
      }

      body {
        height: 100vh;
        margin: 0;
        padding: 1rem;
        color: var(--text-primary);
        /* 使用 flex 居中容器 */
        display: flex;
        justify-content: center;
        align-items: center; /* 大屏垂直居中 */
      }

      /* 主容器优化 */
      .main-container {
        width: 100%;
        height: 100%;
        max-width: 1880px;
        display: grid;
        grid-template-columns: minmax(0, 2.5fr) minmax(420px, 1fr);
        gap: 1.5rem;
        animation: fadeIn 0.8s var(--transition);
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* 卡片样式优化 */
      .card {
        background: var(--card-bg);
        border-radius: var(--border-radius);
        border: 1px solid var(--card-border);
        box-shadow: 0 10px 35px var(--card-shadow);
        display: flex;
        flex-direction: column;
        backdrop-filter: blur(10px);
        overflow: hidden;
      }

      /* 播放器区域优化 */
      .player-column {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        min-height: 0;
        padding: 1.5rem;
      }

      /* 标题高度优化 */
      .player-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 0.75rem;
        margin-bottom: 0.75rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }

      .player-header h2 {
        font-size: 1.5rem;
        font-weight: 700;
        margin: 0;
        background: linear-gradient(90deg, #3b82f6, #38bdf8);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .engine-indicator {
        padding: 0.4rem 0.9rem;
        border-radius: 9999px;
        font-size: 0.8rem;
        font-weight: 600;
        transition: var(--transition);
      }

      .player-viewport {
        width: 100%;
        flex-grow: 1;
        position: relative;
        background: #000;
        border-radius: var(--border-radius);
        overflow: hidden;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
        min-height: 300px;
      }

      .loader {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 5px solid rgba(255, 255, 255, 0.2);
        border-top: 5px solid var(--primary-color);
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 1s linear infinite;
        z-index: 10;
        display: none;
      }

      @keyframes spin {
        from {
          transform: translate(-50%, -50%) rotate(0deg);
        }
        to {
          transform: translate(-50%, -50%) rotate(360deg);
        }
      }

      #videojs-container,
      #flvjs-container,
      #mse-container {
        width: 100%;
        height: 100%;
        display: none;
      }

      .video-js,
      #flv-video,
      #mse-video {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
      }

      .controls-log-column {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        min-height: 0;
      }

      .control-panel {
        flex-shrink: 0;
        padding: 1.5rem;
      }

      .panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 0.75rem;
        margin-bottom: 1.25rem;
        border-bottom: 1px solid var(--card-border);
      }

      .panel-header h2 {
        font-size: 1.35rem;
        font-weight: 600;
        margin: 0;
        color: var(--text-primary);
      }

      label {
        display: block;
        margin-bottom: 0.75rem;
        font-weight: 500;
        color: var(--text-secondary);
        font-size: 0.9rem;
      }

      input {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid var(--card-border);
        border-radius: 0.5rem;
        font-size: 0.95rem;
        transition: var(--transition);
        background: rgba(43, 54, 72, 0.7);
        color: var(--text-primary);
      }

      input::placeholder {
        color: var(--text-tertiary);
      }

      input:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px var(--primary-glow);
      }

      button {
        padding: 0.75rem 1.25rem;
        border: none;
        border-radius: 0.5rem;
        cursor: pointer;
        font-weight: 600;
        font-size: 0.95rem;
        transition: var(--transition);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
      }

      button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
      }

      button:active {
        transform: translateY(0);
      }

      #load-btn {
        background: linear-gradient(135deg, var(--primary-color), #2563eb);
        color: white;
        width: 100%;
        margin-top: 1.25rem;
        font-weight: 600;
        letter-spacing: 0.5px;
      }

      #load-btn:hover {
        background: linear-gradient(135deg, #2563eb, #1d4ed8);
        box-shadow: 0 4px 20px var(--primary-glow);
      }

      .button-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-top: 1.25rem;
      }

      .preset-btn {
        flex: 1 1 calc(50% - 0.75rem);
        background: rgba(55, 65, 81, 0.5);
        color: var(--text-secondary);
        font-size: 0.85rem;
        padding: 0.65rem;
        border: 1px solid rgba(255, 255, 255, 0.05);
      }

      .preset-btn:hover {
        background: rgba(75, 85, 99, 0.7);
        color: var(--text-primary);
        border-color: rgba(59, 130, 246, 0.3);
      }

      .preset-btn.active {
        background: rgba(59, 130, 246, 0.2);
        color: white;
        border-color: var(--primary-color);
        box-shadow: 0 0 15px var(--primary-glow);
        transform: translateY(-2px);
      }

      .log-container {
        flex-grow: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        position: relative;
        padding: 0;
      }

      .log-container::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"><g fill-opacity="0.01"><circle fill="%23fff" cx="400" cy="400" r="400"/><circle fill="%231f2937" cx="400" cy="400" r="300"/><circle fill="%232b3648" cx="400" cy="400" r="200"/><circle fill="%23374151" cx="400" cy="400" r="100"/></g></svg>');
        opacity: 0.2;
        pointer-events: none;
      }

      .log-header {
        padding: 1.25rem 1.5rem 0.75rem;
        flex-shrink: 0;
        border-bottom: 1px solid var(--card-border);
      }

      .clear-log-btn {
        background: none;
        padding: 0.25rem;
        border-radius: 9999px;
        color: var(--text-tertiary);
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .clear-log-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        color: var(--text-primary);
      }

      .log-content {
        padding: 1.25rem 1.5rem;
        flex-grow: 1;
        overflow-y: auto;
        font-family: "SF Mono", "Courier New", monospace;
        font-size: 0.85rem;
      }

      .log-content::-webkit-scrollbar {
        width: 8px;
      }
      .log-content::-webkit-scrollbar-track {
        background: transparent;
      }
      .log-content::-webkit-scrollbar-thumb {
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 4px;
      }
      .log-content::-webkit-scrollbar-thumb:hover {
        background-color: var(--primary-color);
      }
      .log-content {
        scrollbar-width: thin;
        scrollbar-color: var(--primary-color) transparent;
      }

      .log-entry {
        padding: 0.5rem 0;
        display: flex;
        gap: 1rem;
        line-height: 1.5;
      }

      .log-time {
        color: var(--text-tertiary);
        flex-shrink: 0;
        font-size: 0.8rem;
      }
      .log-message {
        color: var(--text-secondary);
        flex-grow: 1;
      }
      .log-entry.error .log-message {
        color: var(--danger-color);
        text-shadow: 0 0 8px var(--danger-glow);
      }
      .log-entry.success .log-message {
        color: var(--success-color);
        text-shadow: 0 0 8px var(--success-glow);
      }
      .log-entry.info .log-message {
        color: var(--info-color);
        text-shadow: 0 0 8px var(--info-glow);
      }

      /* --- 关键修改 2: 修正响应式规则 --- */
      @media (max-width: 1200px) {
        /* 核心修复：必须同时修改 html 和 body 以允许滚动 */
        html,
        body {
          height: auto;
          overflow-y: auto;
        }

        body {
          /* 确保内容从顶部开始，而不是在长页面上垂直居中 */
          align-items: flex-start;
        }

        .main-container {
          grid-template-columns: 1fr; /* 单列布局 */
          height: auto;
          overflow: visible; /* 让父元素处理滚动 */
        }

        .controls-log-column {
          height: auto;
          overflow: visible;
        }

        .player-column {
          height: auto;
        }

        .log-container {
          height: 400px;
        }
      }

      @media (max-width: 768px) {
        body {
          padding: 0.5rem;
        }
        .main-container {
          gap: 1rem;
        }
        .button-group {
          flex-direction: column;
        }

        .preset-btn {
          flex: 1 1 auto;
        }

        .player-column,
        .control-panel {
          padding: 1.25rem;
        }

        .log-header,
        .log-content {
          padding: 1rem;
        }

        .player-header h2 {
          font-size: 1.25rem;
        }
        .panel-header h2 {
          font-size: 1.2rem;
        }
        .engine-indicator {
          font-size: 0.75rem;
          padding: 0.35rem 0.8rem;
        }
        input {
          padding: 0.65rem;
          font-size: 0.9rem;
        }
        button {
          padding: 0.65rem 1rem;
          font-size: 0.9rem;
        }
      }

      /* 滚动指示器 */
      .scroll-indicator {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        color: var(--text-secondary);
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 0.85rem;
        display: none; /* 默认隐藏 */
        align-items: center;
        gap: 8px;
        z-index: 1000;
        opacity: 0;
        transition: opacity 0.3s ease;
        border: 1px solid rgba(255, 255, 255, 0.1);
      }

      .scroll-indicator.show {
        display: flex;
        opacity: 1;
      }

      .scroll-indicator svg {
        animation: bounce 1.5s infinite;
      }

      @keyframes bounce {
        0%,
        20%,
        50%,
        80%,
        100% {
          transform: translateY(0);
        }
        40% {
          transform: translateY(-8px);
        }
        60% {
          transform: translateY(-4px);
        }
      }
    </style>
  </head>
  <body>
    <div class="scroll-indicator" id="scroll-indicator">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <polyline points="7 13 12 18 17 13"></polyline>
        <polyline points="7 6 12 11 17 6"></polyline>
      </svg>
      向下滚动查看更多内容
    </div>

    <div class="main-container">
      <div class="card player-column">
        <div class="player-header">
          <h2>智能混合视频播放器</h2>
          <div class="engine-indicator" id="engine-indicator">未启动</div>
        </div>
        <div class="player-viewport">
          <div class="loader" id="loader"></div>
          <div id="videojs-container"></div>
          <div id="flvjs-container"></div>
          <div id="mse-container"></div>
        </div>
      </div>

      <div class="controls-log-column">
        <div class="card control-panel">
          <div class="panel-header">
            <h2>控制台</h2>
          </div>
          <label for="media-url">媒体资源地址 (URL)</label>
          <input
            type="text"
            id="media-url"
            placeholder="支持 .mp4, .m3u8, .flv, ws://..."
            value="http://vjs.zencdn.net/v/oceans.mp4"
          />
          <button id="load-btn">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
              <polyline points="7 10 12 15 17 10" />
              <line x1="12" y1="15" x2="12" y2="3" />
            </svg>
            加载媒体
          </button>
          <div class="button-group">
            <button
              class="preset-btn"
              data-url="http://vjs.zencdn.net/v/oceans.mp4"
              title="播放MP4格式视频"
            >
              MP4
            </button>
            <button
              class="preset-btn"
              data-url="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
              title="播放HLS(m3u8)直播流"
            >
              HLS
            </button>
            <button
              class="preset-btn"
              data-url="https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv"
              title="播放HTTP-FLV视频"
            >
              HTTP-FLV
            </button>
            <button
              class="preset-btn"
              data-url="ws://localhost:8888?type=flv"
              title="播放通过WebSocket传输的FLV流"
            >
              WS-FLV
            </button>
            <button
              class="preset-btn"
              data-url="ws://localhost:8889?type=fmp4"
              title="播放通过WebSocket传输的fMP4流"
            >
              WS-fMP4
            </button>
          </div>
        </div>
        <div class="card log-container">
          <div class="panel-header log-header">
            <h2>系统日志</h2>
            <button id="clear-log-btn" class="clear-log-btn" title="清除日志">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path d="M3 6h18" />
                <path
                  d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
                />
                <line x1="10" y1="11" x2="10" y2="17" />
                <line x1="14" y1="11" x2="14" y2="17" />
              </svg>
            </button>
          </div>
          <div class="log-content" id="log-output">
            <div class="log-entry info">
              <span class="log-time">[系统]</span>
              <span class="log-message">智能播放器 v13.1 已就绪</span>
            </div>
            <div class="log-entry">
              <span class="log-time">[提示]</span>
              <span class="log-message">请选择预设或输入媒体URL</span>
            </div>
            <div class="log-entry">
              <span class="log-time">[提示]</span>
              <span class="log-message">默认已加载MP4演示视频</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const urlInput = document.getElementById("media-url");
        const loadBtn = document.getElementById("load-btn");
        const logOutput = document.getElementById("log-output");
        const presetButtons = document.querySelectorAll(".preset-btn");
        const loader = document.getElementById("loader");
        const engineIndicator = document.getElementById("engine-indicator");
        const videojsContainer = document.getElementById("videojs-container");
        const flvjsContainer = document.getElementById("flvjs-container");
        const mseContainer = document.getElementById("mse-container");
        const clearLogBtn = document.getElementById("clear-log-btn");
        const scrollIndicator = document.getElementById("scroll-indicator");

        // 添加滚动指示器逻辑
        function showScrollIndicator() {
          if (window.innerHeight < 800) {
            scrollIndicator.classList.add("show");

            // 5秒后自动隐藏
            setTimeout(() => {
              scrollIndicator.classList.remove("show");
            }, 5000);
          }
        }

        // 页面加载时检查是否需要显示滚动指示器
        setTimeout(showScrollIndicator, 1000);

        // 监听滚动事件隐藏指示器
        window.addEventListener("scroll", () => {
          scrollIndicator.classList.remove("show");
        });

        let videojsPlayer = null;
        let flvPlayer = null;
        let msePlayer = {
          mediaSource: null,
          sourceBuffer: null,
          websocket: null,
        };

        function updateActiveButton(currentUrl) {
          presetButtons.forEach((btn) => {
            if (btn.getAttribute("data-url") === currentUrl) {
              btn.classList.add("active");
            } else {
              btn.classList.remove("active");
            }
          });
        }

        function log(message, type = "default") {
          const logEntry = document.createElement("div");
          logEntry.className = `log-entry ${type}`;
          const timeSpan = document.createElement("span");
          timeSpan.className = "log-time";
          timeSpan.textContent = `[${new Date().toLocaleTimeString()}]`;
          const messageSpan = document.createElement("span");
          messageSpan.className = "log-message";
          messageSpan.textContent = message;
          logEntry.appendChild(timeSpan);
          logEntry.appendChild(messageSpan);
          logOutput.appendChild(logEntry);
          logOutput.scrollTop = logOutput.scrollHeight;

          // 滚动到底部时隐藏指示器
          const isAtBottom =
            logOutput.scrollHeight - logOutput.clientHeight <=
            logOutput.scrollTop + 1;
          if (isAtBottom) {
            scrollIndicator.classList.remove("show");
          }
        }

        function showLoader(show) {
          loader.style.display = show ? "block" : "none";
        }

        function updateEngineIndicator(engine) {
          engineIndicator.textContent = engine ? `${engine} 引擎` : "未启动";
          const styles = {
            "Video.js": {
              background: "var(--primary-color)",
              color: "#fff",
              boxShadow: `0 0 15px var(--primary-glow)`,
            },
            "flv.js": {
              background: "var(--success-color)",
              color: "#fff",
              boxShadow: `0 0 15px var(--success-glow)`,
            },
            "MSE/fMP4": {
              background: "#f97316",
              color: "#fff",
              boxShadow: `0 0 15px rgba(249, 115, 22, 0.6)`,
            },
            null: {
              background: "rgba(55, 65, 81, 0.5)",
              color: "var(--text-secondary)",
              boxShadow: "none",
            },
          };
          Object.assign(
            engineIndicator.style,
            styles[engine] || styles["null"]
          );
        }

        function cleanupPlayers() {
          showLoader(true);
          if (videojsPlayer || flvPlayer || msePlayer.websocket)
            log("清理旧的播放器实例...", "info");
          if (videojsPlayer) {
            videojsPlayer.dispose();
            videojsPlayer = null;
          }
          if (flvPlayer) {
            flvPlayer.destroy();
            flvPlayer = null;
          }
          if (msePlayer.websocket) {
            msePlayer.websocket.close();
            msePlayer = {};
          }
          videojsContainer.style.display = "none";
          videojsContainer.innerHTML = "";
          flvjsContainer.style.display = "none";
          flvjsContainer.innerHTML = "";
          mseContainer.style.display = "none";
          mseContainer.innerHTML = "";
          updateEngineIndicator(null);
        }

        function createMsePlayer(url, mimeCodec) {
          if (!window.MediaSource) {
            log("浏览器不支持 MediaSource API", "error");
            showLoader(false);
            return;
          }
          mseContainer.style.display = "block";
          const videoEl = document.createElement("video");
          videoEl.id = "mse-video";
          videoEl.controls = true;
          videoEl.autoplay = true;
          videoEl.muted = true;
          mseContainer.appendChild(videoEl);

          const mediaSource = new MediaSource();
          videoEl.src = URL.createObjectURL(mediaSource);
          msePlayer.mediaSource = mediaSource;

          mediaSource.addEventListener("sourceopen", () => {
            log("MediaSource已打开", "success");
            try {
              const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
              msePlayer.sourceBuffer = sourceBuffer;
              const ws = new WebSocket(url);
              ws.binaryType = "arraybuffer";
              msePlayer.websocket = ws;
              ws.onopen = () => {
                log("fMP4 WebSocket已连接", "success");
                updateEngineIndicator("MSE/fMP4");
                showLoader(false);
              };
              ws.onmessage = (event) => {
                if (!sourceBuffer.updating) {
                  try {
                    sourceBuffer.appendBuffer(event.data);
                  } catch (e) {
                    log(`Buffer错误: ${e.message}`, "error");
                  }
                }
              };
              ws.onclose = () => log("fMP4 WebSocket已关闭", "info");
              ws.onerror = (err) => {
                log("fMP4 WebSocket错误", "error");
                showLoader(false);
              };
            } catch (e) {
              log(`创建SourceBuffer失败: ${e.message}`, "error");
              showLoader(false);
            }
          });
        }

        function loadMedia() {
          let url = urlInput.value.trim();
          if (!url) {
            log("URL不能为空。", "error");
            return;
          }
          updateActiveButton(url);
          cleanupPlayers();

          let requiredEngine = "videojs";
          try {
            if (url.startsWith("ws")) {
              const urlObj = new URL(url.replace(/^ws/, "http"));
              requiredEngine =
                urlObj.searchParams.get("type") === "fmp4"
                  ? "mse_fmp4"
                  : "flvjs";
            } else if (url.endsWith(".flv")) {
              requiredEngine = "flvjs";
            }
          } catch (e) {
            log("URL格式无效", "error");
            showLoader(false);
            return;
          }

          log(`使用引擎: ${requiredEngine}`, "info");

          if (requiredEngine === "videojs") {
            videojsContainer.style.display = "block";
            const videoEl = document.createElement("video");
            videoEl.className = "video-js vjs-default-skin";
            videojsContainer.appendChild(videoEl);
            videojsPlayer = videojs(videoEl, {
              controls: true,
              autoplay: true,
              muted: true,
              fluid: true,
            });
            const type = url.endsWith(".m3u8") ? "application/x-mpegURL" : "";
            videojsPlayer.src({ src: url, type: type });
            videojsPlayer.on("ready", () => {
              showLoader(false);
              log("Video.js已就绪", "success");
              updateEngineIndicator("Video.js");
            });
            videojsPlayer.on("error", () => {
              showLoader(false);
              log(`Video.js 错误: ${videojsPlayer.error().message}`, "error");
            });
          } else if (requiredEngine === "flvjs") {
            flvjsContainer.style.display = "block";
            const videoEl = document.createElement("video");
            videoEl.id = "flv-video";
            videoEl.controls = true;
            videoEl.autoplay = true;
            videoEl.muted = true;
            flvjsContainer.appendChild(videoEl);
            flvPlayer = flvjs.createPlayer({
              type: "flv",
              isLive: url.startsWith("ws"),
              url: url,
            });
            flvPlayer.attachMediaElement(videoEl);
            flvPlayer.load();
            let played = false;
            flvPlayer.on(flvjs.Events.STATISTICS_INFO, () => {
              if (!played) {
                showLoader(false);
                updateEngineIndicator("flv.js");
                log("flv.js 开始接收数据", "success");
                played = true;
              }
            });
            flvPlayer.on(flvjs.Events.ERROR, (type, detail) => {
              showLoader(false);
              log(`flv.js 错误: ${type} - ${detail}`, "error");
            });
          } else if (requiredEngine === "mse_fmp4") {
            const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
            log(`使用MIME编解码器: ${mimeCodec}`, "info");
            createMsePlayer(url, mimeCodec);
          }
        }

        clearLogBtn.addEventListener("click", () => {
          logOutput.innerHTML = "";
          log("日志已清除。", "info");
        });

        loadBtn.addEventListener("click", loadMedia);
        presetButtons.forEach((button) => {
          button.addEventListener("click", function () {
            urlInput.value = this.getAttribute("data-url");
            loadMedia();
          });
        });

        // 初始加载演示视频
        setTimeout(() => {
          loadMedia();
        }, 500);

        // 初始日志
        log("智能播放器 v13.1 已就绪", "success");
      });
    </script>
  </body>
</html>
